@extends('client/layoutIndex')

@section('link')
    <link href="{{ asset('client/css/cart.css') }}" rel="stylesheet">
@stop
@section('content')
    <span id="msg" style="display: none">
        @if (count($errors) > 0)
            @foreach ($errors->all() as $error)
                <div style="width: 100%;">
                    <span style="color: red;display: block;margin: 0px auto;width: 200px;text-align: center;">{{ $error }}</span>
                </div>
            @endforeach
        @endif
    </span>
    <script type="text/javascript">
        var _msg = $('#msg div span').text();
        console.log(_msg);
        if(_msg != ''){
            layer.msg(_msg);
        }
    </script>
<div class="row" style="background:#f5f5f5;">
<div class="cart">
    <div class="step" style="margin-left:30px;">
        <div style="width:30px;height:30px;border-radius:20px;background:#fdb713;
        color:#fff;text-align:center;line-height:30px;float:fixed;position:relative;">
        1</div>
        <span style="width:100px;height:3px;background:#fdb713;display:block;
        margin-left:20px;margin-top:-15px;"></span>
        <div style="width:30px;height:30px;border-radius:20px;background:#ccc;
        color:grey;text-align:center;line-height:30px;float:fixed;position:relative;
        margin-left:120px;margin-top:-15px;">2</div>
        <span style="width:100px;height:3px;background:#ccc;display:block;
        margin-left:140px;margin-top:-17px;"></span>
        <div style="width:30px;height:30px;border-radius:20px;background:#ccc;
        color:grey;text-align:center;line-height:30px;float:fixed;position:relative;
        margin-left:240px;margin-top:-17px;">3</div>
        <span class="font blue" style="margin-left:-15px;"><em>购物车</em></span>
        <span class="line grey"></span>
        <span class="font grey" style="margin-left:65px;"><em>订单信息</em></span>
        <span class="line grey"></span>
        <span class="font grey" style="margin-left:65px;"><em>购物成功</em></span>
        <span class="line grey"></span>
    </div>
    <form action="{{ url('client/toOrders') }}" method="post" enctype="multipart/form-data">
        {{csrf_field()}}
        <div class="tit" style="margin-top:30px;">
                <h3 style="font-weight:bold;">&nbsp;&nbsp;购物车</h3>
                <span></span>
                <img src="{{ asset('client/image/xvxian.png') }}">
            </div>
        <table  class="cart-table" id="table">
            <thead>
            <tr style="height:40px;">
                <th width="8%">商品勾选</th>
                <th width="40%">商品名称</th>
                <th width="8%">单价</th>
                <th width="8%">数量</th>
                <th width="8%">金额</th>
                <th width="8%">操作</th>
            </tr>
            </thead>
            <tbody class="cart-order">
            @if(!empty($list))
                @foreach ($list as $key => $value)
                <tr>
                    <td>
                        <input id="{{ $value['id'] }}_chk_price" type="checkbox" name="check_cart[]" value="{{ $value['id'] }}" onchange="totalPrice({{ $value['id'] }})">
                    </td>
                    <td class="t-p">
                        <img src=" /productImg/{{ $value['pic'] }}">
                        {!! $value['goods_name'] !!}
                    </td>
                    <td class="price">
                        <input value="{!! $value['goods_price'] !!}" id="{{ $value['id'] }}_com_price" disabled="disabled" size="7px">
                    </td>
                    <td>
                        <div class="wrap-input" style="margin-top:-15px;">
                            <a title="减一" onclick="decr({{ $value['id'] }})" class="btn-reduce" href="javascript:;">
                                <i class="fa fa-angle-down">-</i>
                            </a>
                            <input id="{{ $value['id'] }}" width="20" value="{!! $value['goods_num'] !!}" maxlength="4" type="text" name="number[{{ $value['id'] }}]" size="7px" />
                            <a title="加一" onclick="add({{ $value['id'] }})" class="btn-add" href="javascript:;">
                                <i class="fa fa-angle-up">+</i>
                            </a>
                            <input  type="hidden" id="{{ $value['id'] }}PerPrice" name="com_price" value="{!! $value['goods_price'] !!}"/>
                            <input  type="hidden" id="{{ $value['id'] }}stock_count" value="{!! $value['goods_inve'] !!}"/>
                            <input type="hidden" name="com_id" value="{{ $value['id'] }}"><br>
                        </div>
                    </td>
                    <td  class="t-total">
                        <strong><span id="{{ $value['id'] }}_price">{!! $value['goods_price'] * $value['goods_num'] !!}</span>积分</strong>
                    </td>

                    <td  class="t-operate">
                        <a href="{{ url('client/delCart/'.$value['id']) }}" class="">删除</a>
                    </td>
                </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="6">
                        <a href="{{ url('/') }}">去购物</a>
                    </td>
                </tr>
            @endif
            </tbody>
            <tbody class="cart-statement">
                    <tr>
                        <td colspan="7">
                            <div class="statement-l">
                                <div class="checkbox" style="margin-top:20px;">
                                    <label>
                                        <input type="checkbox" id="checkAll" onclick="selectAll(this)"> 全选
                                        <script>
//                                            $("#checkAll").click(function () {
//                                                if (this.checked) {
//                                                    //$(this).attr("checked", "checked");
//                                                    console.log(this);
//                                                    $("input[name='check_cart[]']").each(function () {
//                                                        this.checked = true;
//                                                    });
//                                                } else {
//                                                    //$(this).removeAttr("checked");
//                                                    $("input[name='id[]']").each(function () {
//                                                        this.checked = false;
//                                                    });
//                                                }
//                                            });
                                            function selectAll(obj) {
                                                $("#table input[type='checkbox']").prop('checked', $(obj).prop('checked'));
                                            }

                                        </script>
                                    </label>

                                </div>
                                <!-- {{--<a>批量删除</a>--}}
                                {{--<a>批量加入收藏夹</a>--}} -->
                            </div>
                            <div class="statement-r">
                                <span>订单总价为：<span id="total_pric"></span>积分</span>
                                <input type="hidden" name="total_price" id="total_price" value="0">
                                <a><input type="submit" value="去&nbsp;结&nbsp;算" class="btn btn-danger btn-lg" style="border:none; width: 100%;font-size:25px;height:62px;"/></a>
                            </div>
                        </td>
                    </tr>
            </tbody>
            <!-- <tr style="height:80px;">
                <td colspan="7" style="text-align:right;">订单总价为：<span id="total_pric"></span>元
                    <input type="submit" value="提交订单">
                </td>
            </tr> -->
            <script type="text/javascript">
//                function $(id)
//                {
//                    return document.getElementById(id);
//                }
//                var id = document.getElementById(id);
                function add(id)
                {
                    var currentVal = $(id).value;
                    var com_stock = $(id + 'stock_count').value;
                    currentVal=parseInt(currentVal)+1;
                    if(currentVal>com_stock)
                    {
                        alert("库存为"+com_stock+"个仅能购买次数量");
                        currentVal=com_stock;
                    }
                    else {
                        $(id).value=currentVal;
                        var com_currentPrice = $(id + '_com_price').value;
                        $(id+ '_price').innerHTML =  parseInt(currentVal) * parseFloat(com_currentPrice);

                        if(document.getElementById(id + '_chk_price').checked) {
                            var totalPric = document.getElementById('total_pric').innerHTML;
                            var nowNumb = parseInt(document.getElementById(id).value) - 1;
                            var nowPric = parseInt(nowNumb) * parseInt(document.getElementById(id + '_com_price').value);
                            // 变化前的总价格		变化前的单项价格    变化后的单项价格
                            document.getElementById('total_pric').innerHTML = parseInt(totalPric) + (parseInt(document.getElementById(id + '_price').innerHTML) - parseInt(nowPric));
                            document.getElementById('total_price').value = document.getElementById('total_pric').innerHTML
                        }
                    }
                }
                function decr(id)
                {
                    var currentVal = $(id).value;
                    currentVal=parseInt(currentVal)-1;
                    if(currentVal < 1)
                    {
                        alert('商品数量不能小于1！');
                        currentVal = 1;
                    }
                    else {
                        $(id).value=currentVal;
                        var com_currentPrice = $(id + '_com_price').value;
                        $(id+ '_price').innerHTML =  parseInt(currentVal) * parseFloat(com_currentPrice);

                        if(document.getElementById(id + '_chk_price').checked) {
                            var totalPric = document.getElementById('total_pric').innerHTML;
                            var nowNumb = parseInt(document.getElementById(id).value) - 1;
                            var nowPric = parseInt(nowNumb) * parseInt(document.getElementById(id + '_com_price').value);
                            document.getElementById('total_pric').innerHTML = parseInt(totalPric) + parseInt(nowPric) - parseInt(document.getElementById(id + '_price').innerHTML);
                            document.getElementById('total_price').value = document.getElementById('total_pric').innerHTML
                        }
                    }
                }

                function totalPrice(id) {
                    var add_price = document.getElementById(id + '_price').innerHTML;
                    if(document.getElementById('total_pric').innerHTML == "") {
                        now_price = 0;
                    }
                    else {
                        now_price = document.getElementById('total_pric').innerHTML;
                    }
                    if(document.getElementById(id + '_chk_price').checked) {
                        document.getElementById('total_pric').innerHTML = parseInt(add_price) + parseInt(now_price);
                    }
                    else {
                        document.getElementById('total_pric').innerHTML = parseInt(now_price) - parseInt(add_price);
                    }
                    document.getElementById('total_price').value = document.getElementById('total_pric').innerHTML
                }

            </script>
        </table>
    </form>
</div>
</div>
@stop